<!Doctype html>
<html>
<head>
<title>Q+widget</title>
<meta charset="utf-8" />
<style>
body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,form,input,textarea,button,fieldset,img,legend,ul,ol,li,dl,dt,dd,th,td,div,a {margin:0;outline:0;}
body{font:66.5%/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;}
#player{
	background-color:#f1f1f1;
	height:64px;
	padding:8px 12px;
	min-width:270px;
}
#player .c{
	border:#a9adb5 1px solid;
	border-radius:2px;
	box-shadow: 0 2px 2px rgba(169,173,181,.5);
	float:left;
	height:62px;
	margin-right:10px;
	position:relative;
}
.c-k{
	display:block;
	height:24px;
	width:4px;
	border:#d6d8db 1px solid;
	border-left:none;
	border-radius:0 3px 3px 0;
	position:absolute;
	right:-4px;
}
.ck1{
	top:2px;
}
.ck2{
	top:36px;
}
#player .p-a{
	width:auto;
	height:64px;
	overflow:hidden;
}
#player .p-i{
	font-weight:400;
	font-size:1.2em;
	text-shadow:0 2px 2px rgb(255,255,255);
	padding-bottom:5px;
	position:relative;
	height:30px;
}
#player .s-t{
	display:block;
	font-size:1em;
	color:#9d9d9d;
	font-weight:400;
}
.p-i h1{
	padding:2px;
	width:28px;
	height:20px;
	background:#dedede;
	border:#d2d2d2 1px solid;
	border-radius:2px;
	position:absolute;
	right:8px;
	top:0;
}
.p-i .xm{
	text-indent:-9999px;
	color:#fff;
	width:28px;
	height:20px;
	display:block;
	background:url("") no-repeat -4px -4px;
	border-radius:2px;
}
.xm:active{
	-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.5);
	-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.5);
	-o-box-shadow:1px 1px 1px rgba(0,0,0,0.5);
	box-shadow:0 1px 1px rgba(0,0,0,0.5);
}
.progress{
	height:4px;
	width:100%;
	background:#dedede;
	border-bottom:1px solid #fff;
}
.seek-bar{
	height:2px;
	position:relative;
	border:#9b9b9b 1px solid;
	border-radius:1px;
	position:relative;
	z-index:1;
}
.play-bar{
	position:absolute;
	z-index:2;
	height:2px;
	border:#e86737 1px solid;
	background:#f9a455;
	border-radius:1px;
	top:-1px;
	left:-1px;
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fdb768),to(#f9a455));
	background-image: -webkit-linear-gradient(top,#fdb768,#f9a455);
	background-image: linear-gradient(top,#fdb768,#f9a455);
}
.controls{
	padding-top:10px;
	position:relative;
}
.p-s{
	overflow:hidden;
	width:100px;
	height:12px;
	position:absolute;
	left:10px;
}
.p-s a{
	float:left;
	margin-right:10px;
	height:12px;
	width:12px;
	background:url("") no-repeat;
	text-indent:-9999px;
}
a.prev{
	background-position:0 -40px;
}
a.playing{
	background-position:-22px -40px;
}
a.next{
	background-position:-42px -40px;
}
a.prev:active{
	background-position:0 -64px;
}
a.paused{
	background-position:-22px -64px;
}
a.next:active{
	background-position:-42px -64px;	
}
.volume{
	width:100px;
	position:absolute;
	right:5px;
}
.v-bar{
	height:2px;
	border:#cacaca 1px solid;
	margin-right:22px;
	border-radius:2px 0 0 2px;
	background:#fff;
	border-right:none;
	position:relative;
	z-index:5;
	padding:4px 2px 4px 4px;
}
div.v-bar::after{
	border:#f00 1px solid;
  width:10px;
  height:10px;
  position:relative;
}
.v-pro,.v-cur{
	height:1px;
	border-radius:1px;
}
.v-pro{
	border:#c8c8c8 1px solid;
	background:#e7e7e7;
	position:relative;
}
.v-cur{
	border:#df540b 1px solid;
	position:absolute;
	top:-1px;
	left:-1px;
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fdb768),to(#f9a455));
	background-image: -webkit-linear-gradient(top,#fdb768,#f9a455);
	background-image: linear-gradient(top,#fdb768,#f9a455);
}
.handle{
	width:8px;
	height:8px;
	display:block;
	background:url("") no-repeat right -23px;
	position:absolute;
	top:50%;
	margin-top:-5px;
	[;margin-top:-4px;];
	margin-left:-1px;
}
.s-v{
	height:12px;
	width:12px;
	display:block;
	cursor:pointer;
	background:url("") no-repeat right -1px;
	position:absolute;
	right:0;
	top:0;
}
.arrow{
	border-width: 6px 0 6px 6px;
	border-style: solid none solid solid;
	border-color: transparent;
	border-left-color: #cdcdcd;
	width: 0;
	height: 0;
	position:absolute;
	top:0;
	z-index:10;
	right:16px;
}
.arrow-line{
	border-width: 5px 0 5px 5px;
	border-style: solid none solid solid;
	border-color: transparent;
	border-left-color: #fff;
	width: 0;
	height: 0;
	position:absolute;
	top:-5px;
	z-index:10;
	right:1px;
}
</style>
</head>
<body>
<section>
	<div id="player">
		<div class="c"><img src="http://img.xiami.com/images/collect/326/26/9533326_1327478926_1.jpg" width="62" />
			<span class="c-k ck1"></span>
			<span class="c-k ck2"></span>
		</div>
		<div class="p-a">
			<div class="p-i"><span id="songName">MR.RAINDROP<b class="s-t">The Candlepark Stars</b></span>
				<h1><a href="#" title="虾米网" class="xm">虾米网</a></h1>
			</div>
			<div class="progress">
				<div class="seek-bar">
					<div id="playBar" class="play-bar"></div>
				</div>
			</div>
			<div class="controls">
				<div class="p-s">
				<a href="javascript:void(0);" id="prevBtn" class="prev">previous</a>
				<a href="javascript:void(0);" id="playBtn" class="playing paused">play</a>
				<a href="javascript:void(0);" id="nextBtn" class="next">previous</a>
				</div>
				<div class="volume">
					<div class="v-bar">
						<div class="v-pro" id="vpro">
							<div class="v-cur" id="pro" style="width:10%;"></div>
							<a href="javascript:void(0);" id="hand" class="handle"></a>
						</div>
					</div>
					<span class="arrow"><b class="arrow-line"></b></span>
					<span class="s-v" id="vol_btn"></span>
				</div>
			</div>
		</div>
	</div>
</section>
<script>
	var songList = [{sid:"001", name:"MR.RAINDROP The Candlepark Stars", src:"http://freshly-ground.com/data/audio/sm2/The%20Fugitives%20-%20Graffiti%20Sex.mp3"}];
	var player = function(){
		this.ado = new Audio();
	}
	player.prototype = {
		_$$: function(id){
			return document.getElementById(id);
		},
		_two: function(s) {
				s += "";
				if (s.length < 2) s = "0" + s;
				return s;
		},
		_Time: function(t){	
			t = Math.round(t);
			var s = t % 60;
			var m = Math.round(t / 60);
			return this._two(m) + ':' + this._two(s);
		},
		_init: function(s){
			var self = this;
			var i = 0;
			data = s;
			var nextBtn = self._$$('nextBtn');
			var prevBtn = self._$$('prevBtn');
			dLine = this._$$('playBar');
			var songName = self._$$('songName');
			var vol_btn = self._$$('vol_btn');
			//duration = self._$$('duration');
			audio = self.ado;
			songName = self._$$('songName');
			play = self._$$('playBtn');
			if(data != ''){
				audio.setAttribute("src", data[i].src);
			}
			play.setAttribute("autobuffer", true);
			
			//歌曲播放与暂停
			function togglePlay(){
				if(data ==''){
					 console.log('亲，请选择歌曲！');
					 return false;
				}
				if(audio.paused){
					if (audio.ended) audio.currentTime = 0;
					audio.play();
					play.setAttribute("class", 'playing');
				}else{
					audio.pause();
					play.setAttribute("class", 'paused');
				}
			};
			function botime(){
				//duration.innerHTML = self._Time(0) + '/' + self._Time(0);
			}
			
			//歌曲播放与暂停
			play.addEventListener('click', function(){
					togglePlay();
			}, false);

			//声音控制
			var vol;
			vol_btn.addEventListener('click', function(){
					if(this.className == ''){
						vol = self._$$('#pro').width();
						audio.volume = 0;
						pro.width('0')
						handle.css('left',0)
						this.setAttribute("class", 'muted');
					}else{
						handle.css('left', vol+"px");
						pro.width(vol/50 * 100 + '%')
						audio.volume = parseFloat(vol/50);
						this.setAttribute("class", 'paused');
					}
			},false);
			
			function change(o,e,ow,w){
					var e = e ? e : window.event;
					if(!window.event) {e.preventDefault();}
					var tX=o.offsetLeft,
						dx=e.clientX;
					document.onmousemove=function(e){
						var e = e ? e : window.event;
						var len=tX+e.clientX-dx;
						if(len>=0 && len<=w){
							o.style.left=len+"px";
							ow.style.width=len/w * 100 + '%';
							audio.volume = parseFloat(len / 50);
						}
					}
					document.onmouseup=function(){
						document.onmousemove=null;
						document.onmouseup=null;
					}
			}
			handle = self._$$('hand');
			function v_init(){
				pro = self._$$('pro');
				sliderWidth = self._$$('vpro').offsetWidth-8;
				handle.style.left=sliderWidth+'px';
				pro.style.width="100%";
				audio.volume = 1;
			}
			v_init();
			handle.onmousedown = function(e){
				ow = self._$$('pro');
				change(this, e, ow, sliderWidth);
			}
			
			//歌曲当前播放时间与歌曲播放时间
			audio.addEventListener("timeupdate", function() {
					var s = parseInt(this.currentTime % 60);
					var m = parseInt((this.currentTime / 60) % 60);
					dLine.style.width = (this.currentTime / this.duration) * 100 + '%';
					//duration.innerHTML = self._Time(this.currentTime) + '/' + self._Time(this.duration);
			}, false);
			
			//播放上一首
			function prevPlay(){
				if(data =='') return false;
				botime();
				i--;
				if (i < 0)
				{	
					//i = data.length-1;
					return false;
				}
				audio.setAttribute("src", data[i].src);
				audio.play();
				play.setAttribute("class", 'playing');
				songName.innerHTML = data[i].name;
			}

			//播放下一首
			function nextPlay(){
				if(data =='') return false;
				botime();
				i++;
				if (i >= data.length)
				{	
					return false;
				}
				audio.setAttribute("src", data[i].src);
				audio.play();
				play.setAttribute("class", 'playing');
				songName.innerHTML = data[i].name;
			};

			//歌曲播放完
			audio.addEventListener("ended", function() {
				botime();
				playBtn.setAttribute("class", 'paused');
				dLine.style.width = 0;
				nextPlay();
			}, false);
			
			//上一首
			prevBtn.addEventListener('click', function(){
				prevPlay();
			},false);

			//下一首
			nextBtn.addEventListener('click', function(){
				nextPlay();
			},false);
		}
	};
	//初始化
	var player = new player();
	player._init(songList);
</script>
</body>
</html>






















